import { TaskStatus } from 'renderer/constants/Consts'
import './TaskProgress.less'


interface TaskProgressProps {
  percent: number
  // info: string
  status: TaskStatus
}


function getStatusInfo(status: TaskStatus, percent: number) {
  switch(status) {
    case TaskStatus.Waiting:
      return '待下载...'
    case TaskStatus.Downloading:
      return `下载进度: ${Math.round(percent*100)}%`
    case TaskStatus.Pause:
      return '暂停下载'
    case TaskStatus.Error:
      return '任务下载错误，无法继续下载'
    case TaskStatus.Done:
      return '下载完成'
  }
}


export default function TaskProgress(props: TaskProgressProps) {
  const { percent, status } = props

  let css = status === TaskStatus.Downloading ? 'task-progress task-progress-loading' : 'task-progress'

  const info = getStatusInfo(status, percent)
  

  return (
    <div className={css} >
      <div className='progress-box' >
        <div className='progress-hot' style={{width: `${percent*100}%`}} ></div>
      </div>
      <div className='progress-info' >
        {info}
      </div>
    </div>
  )
}